<template>
	<view class="index c0 f14 bf">
		<view class="bf5 p5"></view>
		<view class="main f-g-1 mt10">
			<scroll-view class="gleft" scroll-y scroll-with-animation :scroll-top="scrollTop">
				<view class="leftwrp">
					<view class="mi" @tap="handMenu(v.id,i)" v-for="(v, i) in tabs" :key="i">
						<view class="sitem f-c-xc" :class="{active: ccId == v.id}"
							:style="{borderColor:ccId == v.id?'#fff':'',color:ccId == v.id?'#FD8906':''}">
							<view class="f-c t-c f13">{{ v.name }}</view>
						</view>
					</view>
					<view class="mi" style="background: #F9F9FB;"></view>
				</view>
			</scroll-view>
			<scroll-view class="gright" scroll-y scroll-with-animation :scroll-top="pstop" @scroll="psroll">
				<view class="wrp">
					<view class="glist" v-for="(v, i) in tabelList" :key="i" :id="`g-${v.id}`"  @click="toDetail(v,i)">
						<!-- <view class="gname flex">
							<view class="nowei c9 flex f-y-c f12"><view class="cleal mr5"></view>{{v.area.name}}</view>
						</view> -->
						<view class="gwrp">
							<view class="goods f-bt">
								<view class="f-g-1 flex">
									<view class="name f-s wei">{{ v.type.name }} {{v.name}}</view>
									<view class="c9 ml10">{{v.type.max}}人</view>
								</view>
								<view><u-icon name="arrow-right" color="#a7a7a7" size="16"></u-icon></view>
							</view>
						</view>
					</view>
					<view v-if="tabelList.length==0" class="np f-c-c">
						<view class="iconfont icon-queshengtu cb" style="font-size: 90rpx;"></view>
						<view class="f12 cb mt20">暂无桌台</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- <view class="buts">
			<view class="p-0-20 mb10">
				<view class="cf bs30 tac p10 f14 wei" :style="{background:subColor,color:'#000'}"  @click="add">新增桌台</view>
				<view class="c8 tac pb40 f14" @click="cancel">区域管理</view>
			</view>
		</view> -->
		<view class="buts bf5">
			<view class="p-0-20 mb10">
				<view class="cf bs30 tac p10 f14 wei" :style="{background:subColor,color:'#000'}" @click="add">新增桌台</view>
			</view>
			<view class="c8 tac pb15 f14 f-bt">
				<view class="f-c f-g-1" @click="areaAdd" :style="{color:'#FD8906'}">区域管理</view>
				<view class="f-c f-g-1" @click="typeAdd" :style="{color:'#FD8906'}">类型管理</view>
				<view class="f-c f-g-1" @click="serveAdd" :style="{color:'#FD8906'}">服务费</view>
			</view>
		</view>
		
		<!-- <view class="bf">
			<u-tabs :list="tabs" :current="current" lineWidth="40px" :lineColor="subColor"
				:inactiveStyle="{fontSize:'16px',color:'#111'}"
				:activeStyle="{fontSize:'16px',fontWeight:'bold',color:'#111'}" @change="tabChange">
			</u-tabs>
		</view>
		<view class="pl10">
			<view class="f-x-e pr10 mt10 f16">
				<view @click="add" :style="{color:'#FD8906'}">+新增桌台</view>
			</view>
			<view class="p-10-0">
				<u-grid :border="false">
					<u-grid-item v-for="(v,i) in tabelList" :key="i" @click="toDetail(v,i)">
						<view class="w100 h100 pr10 pb10 bs6">
							<view class="bf bs6 p10">
								<text class="grid-text f20 wei6">{{v.type.name}}{{v.name}}</text>
								<view class="dfbc mt35 c9 f12">
									<view class="dfa">
										<text class="type mr5"
											:style="{background:v.state==0?subColor:'#f34c4c'}"></text>
										<text>{{v.stateFormat}}</text>
									</view>
									<text>{{ v.type.min }}/{{v.type.max}}</text>
								</view>
							</view>
						</view>
					</u-grid-item>
				</u-grid>
				<u-toast ref="uToast" />
			</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				subColor: uni.getStorageSync('subject_color'),
				current: 0,
				tabs: [],
				tabelList: [],
				list: [],
				scrollTop: 0,
				sIndex: 0,
				pstop: 0,
				ccId: 0,
			}
		},
		onLoad(options) {
			this.fetchData()
		},
		methods: {
			async fetchData() {
				const {
					data: {
						list
					}
				} = await this.beg.request({
					url: this.api.tableArea,
					data: {
						pageSize: 999
					}
				})
				this.tabs = list ? list : [],
				this.ccId = list.length && list[0].id
				if (list && list.length) {
					this.getTableList(list[0].id)
				}
			},
			async getTableList(areaId) {
				const {
					data: {
						list
					}
				} = await this.beg.request({
					url: this.api.tableList,
					data: {
						areaId,
						pageSize: 999
					}
				})
				this.tabelList = list ? list : []
			},
			handMenu(id, i) {
				this.sIndex = i
				this.getTableList(id)
				this.$nextTick(() => this.ccId = id)
			},
			psroll({
				detail
			}) {
				
			},
			tabChange(e) {
				this.current = e.index
				this.getTableList(e.id)
			},
			getList() {
				if (this.current === 0) {
					this.list = this.tabelList
				} else {
					this.list = this.tabelList[this.current - 1]
				}
			},
			add(item) {
				uni.navigateTo({
					url: '/pages/order/tabels/add'
				})
			},
			areaAdd(){
				uni.navigateTo({
					url: '/pages/order/tabels/areaAdd'
				})
			},
			typeAdd(){
				uni.navigateTo({
					url: '/pages/order/tabels/typeAdd'
				})
			},
			serveAdd(){
				uni.navigateTo({
					url: '/pages/order/tabels/serveAdd'
				})
			},
			toDetail(item) {
				uni.navigateTo({
					url: '/pages/order/tabels/detail?id=' + item.id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		flex: 1;
		display: flex;
		overflow: hidden;
	}
	
	.gleft {
		width: 170rpx;
		flex: 0 0 170rpx;
		background-color: #F9F9FB;
	}
	
	.leftwrp {
		height: auto;
	
		.mi {
			position: relative;
			height: 80rpx;
			color: #999;
			font-size: 26rpx;
			background: #fff;
	
			&:nth-last-child(1) {
				margin-bottom: 100rpx;
			}
	
			.sitem {
				height: 100%;
				margin: auto;
				background: #F9F9FB;
				overflow: hidden;
	
				.title {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
	
				&.active {
					background-color: #ffffff;
					color: #000;
					font-weight: bold;
				}
	
			}
		}
	}
	
	.gright {
		flex: 1;
	
		.wrp {
			padding: 0 20rpx;
			padding-bottom: 280rpx;
		}
	
		.ads1,
		.ads2 {
			height: 300rpx;
		}
	
		.ads1 {
			margin-bottom: 20rpx;
		}
	
	}
	
	.glist {
		.gname {
			padding-bottom: 20rpx;
			font-weight: bold;
			font-size: 26rpx;
			color: #000;
			.cn{
				padding: 10rpx;
				font-weight: normal;
				color: #000;
				border-radius: 10rpx;
			}
			.cleal{
				width: 8rpx;
				height: 8rpx;
				border-radius: 50%;
				background: #999;
			}
		}
	
		.goods {
			display: flex;
			margin-bottom: 36rpx;
			padding-bottom: 36rpx;
			border-bottom: 2rpx solid #f0f0f0;
		}
	}
	
	.buts {
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 20rpx;
	}
</style>